<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>N6_1F储位管理 - 手动</title>
  <%@include file="/WEB-INF/common/css.jsp"%>
  <style>
  	#machine{
  		background: #5bc184;
  		width: 100%;
  		padding-top: 14px;
  		padding-bottom: 14px;
  		display: block;
  		box-shadow: 0 4px 15px #333;
  	}
  	@-webkit-keyframes Glow {
	    from {
	        text-shadow: 0 0 10px #fff,
	                     0 0 20px #fff,
	                     0 0 30px #fff,
	                     0 0 40px #00a67c,
	                     0 0 70px #00a67c,
	                     0 0 80px #00a67c,
	                     0 0 100px #00a67c,
	                     0 0 150px #00a67c;
	    }
	    to {
	        text-shadow: 0 0 5px #fff,
	                     0 0 10px #fff,
	                     0 0 15px #fff,
	                     0 0 20px #00a67c,
	                     0 0 35px #00a67c,
	                     0 0 40px #00a67c,
	                     0 0 50px #00a67c,
	                     0 0 75px #00a67c;
	    }
	}
  	#machine a{
  		color: #fff;
    	font-size: 17px;
    	margin: 10px;
    	transition: all 1.5s ease;
  	}
  	#machine a:hover{
  		box-reflect: below;
  		animation: Glow 1.5s ease infinite alternate;
  	}
  </style>
  <%@include file="/WEB-INF/common/topjs.jsp"%>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  
  <%@include file="/WEB-INF/common/jsp/header.jsp"%>
  
  <div class="layui-body" style="left: 10px;padding-right: 50px;padding-left: 50px">
    <!-- 内容主体区域 -->
    	<br><br>
    	<span id="machine">
    	
		</span>
		<table class="layui-table" id="listshow" border="1">
			<thead>
				<tr class=""  style="background: #399ddb;color: #fff">
					<th>机种</th>
					<th>类型</th>
					<th>状态</th>
					<th>CUM</th>
					<th>暂放状态</th>
					<th>Total</th>
				</tr>
			</thead>
			<tbody>

			</tbody>
		</table>
  </div>
  
  <%@include file="/WEB-INF/common/jsp/footer.jsp"%>
  
</div>
<%@include file="/WEB-INF/common/bottomjs.jsp"%>
<script>
$.ajax({
	url:"${base}/api/dataSummary/findMachinesNoNeedLogin.api",
	type: "post",
	headers: Apicheck.getHeaders(),
	success: function(result){
		console.log(result)
		var html = "";
		for(var i = 0; i < result.data.length; i ++){
			html += "<a href='#' onclick='showData("+result.data[i].id+")'>"+result.data[i].name+"</a>";
		}
		$("#machine").html(html);
		var element = layui.element;
	}
});

showData(1);

function showData(id){
	$("#listshow tbody").html("");
	var hqlhHtml = "<img src='${base}/assets/image/alertemoj/hkl.gif' width='300px'/><br>";
	hqlhHtml += "<h4 style='text-align: center;font-size: 23px;margin-top: 27px;color:#149e5e;font-weight: bold'>不急，不急，数据正在火速从网线中爬过来</h4>";
	
	var hqlhAreat = layer.open({
		title : '感觉自己萌萌哒',
		content : hqlhHtml,
		btn:[],
		closeBtn: 0
	});
	$.ajax({
		url:"${base}/api/dataSummary/list.api?machineId=" + id,
    	type: "post",
    	headers: Apicheck.getHeaders(),
    	data:{"machineId":id, "table":"tb_data_details_hm"},
    	success: function(result){
    		layer.close(hqlhAreat);
    		var xtable = new XTable();
    		xtable.setOption({
    			type: XTable.LEFT_CASCADE,
    			data: [result.data]
    		});
    		console.log(xtable.getOption());
    		xtable.show("listshow");
    	}
	});
}
</script>
</body>
</html>